<template>
<div class="wrapper">
    <div v-if="web" class="header">
        <text class="header-text">上海卓顾信息科技有限公司</text>
        <div class="back-area" @click="back">
            <image class="back" :src="getUrl('image/back.png')"/>
        </div>
    </div>

    <scroller class="main" :show-scrollbar="false">
        <div class='title'>
            <text class="titleText">明细账</text>
            <text class='button'>下载</text>
        </div>
        
        <div class='group' v-for='(item,index) in subsidiarys' :key='index'>
            <div class='item  item-title'>
                <div class='column'>
                    <text class="left">凭证号：</text>
                    <text class="rightBold bold">{{item.voucherNo==null?'':item.voucherNo}}</text>
                </div>
            </div>
            <div class='item'>
                <div class='column'>
                    <text class="left">摘要：</text>
                    <text class="rightBold">{{item.summary}}</text>
                </div>
            </div>
            <div class='item'>
                <div class='column'>
                    <text class="left">借方：</text>
                    <text :class="['rightBold', item.jfbalance < 0 ? 'red' : '']">{{item.jfbalance}}</text>
                </div>
                <div class='column'>
                    <text class="left">贷方：</text>
                    <text :class="['rightBold', item.dfbalance < 0 ? 'red' : '']">{{item.dfbalance}}</text>
                </div>
            </div>
            <div class='item'>
                <div class='column'>
                    <text class="left">方向：</text>
                    <text class="rightBold">{{item.direction}}</text>
                </div>
                <div class='column'>
                    <text class="left">余额：</text>
                    <text :class="['rightBold', item.currentbalance < 0 ? 'red' : '']">{{item.currentbalance}}</text>
                </div>
            </div>
        </div>
    </scroller>
</div>
</template>

<script>
export default {
    data () {
        return {
            web: false,
            subsidiarys: [{
                "foresubText": null,
                "date": "2017-08",
                "voucherNo": null,
                "summary": "期初余额",
                "direction": "借",
                "jfbalance": -3000.00,
                "jfbalanceOrg": 0.00,
                "jfnumber": 0.00,
                "jfprice": 0,
                "dfbalance": 2000.00,
                "dfbalanceOrg": 0.00,
                "dfnumber": 0.00,
                "dfprice": 0,
                "currentbalance": 1000.00,
                "currentbalanceOrg": 0.00,
                "currentnumber": 0.00,
                "currentprice": 0,
                "exchangeRate": null,
                "voucherId": -1
                }, {
                "foresubText": null,
                "date": "2017-08-31",
                "voucherNo": "002",
                "summary": "ddd",
                "direction": "借",
                "jfbalance": 10.00,
                "jfbalanceOrg": 0.00,
                "jfnumber": 0.00,
                "jfprice": 0,
                "dfbalance": 0.00,
                "dfbalanceOrg": 0.00,
                "dfnumber": 0.00,
                "dfprice": 0,
                "currentbalance": 1010.00,
                "currentbalanceOrg": 0.00,
                "currentnumber": 0.00,
                "currentprice": 0,
                "exchangeRate": 0.00000,
                "voucherId": 25874
                }, {
                "foresubText": null,
                "date": "2017-08-31",
                "voucherNo": "005",
                "summary": "采购A材料",
                "direction": "贷",
                "jfbalance": 0.00,
                "jfbalanceOrg": 0.00,
                "jfnumber": 0.00,
                "jfprice": 0,
                "dfbalance": 5000.00,
                "dfbalanceOrg": 0.00,
                "dfnumber": 0.00,
                "dfprice": 0,
                "currentbalance": 3990.00,
                "currentbalanceOrg": 0.00,
                "currentnumber": 0.00,
                "currentprice": 0,
                "exchangeRate": 0.00000,
                "voucherId": 134527
                }, {
                "foresubText": null,
                "date": "2017-08-31",
                "voucherNo": "005",
                "summary": "采购B材料",
                "direction": "贷",
                "jfbalance": 0.00,
                "jfbalanceOrg": 0.00,
                "jfnumber": 0.00,
                "jfprice": 0,
                "dfbalance": 60000.00,
                "dfbalanceOrg": 0.00,
                "dfnumber": 0.00,
                "dfprice": 0,
                "currentbalance": 63990.00,
                "currentbalanceOrg": 0.00,
                "currentnumber": 0.00,
                "currentprice": 0,
                "exchangeRate": 0.00000,
                "voucherId": 134527
                }, {
                "foresubText": null,
                "date": "2017-08-31",
                "voucherNo": "005",
                "summary": "采购C材料",
                "direction": "贷",
                "jfbalance": 0.00,
                "jfbalanceOrg": 0.00,
                "jfnumber": 0.00,
                "jfprice": 0,
                "dfbalance": 120000.00,
                "dfbalanceOrg": 0.00,
                "dfnumber": 0.00,
                "dfprice": 0,
                "currentbalance": 183990.00,
                "currentbalanceOrg": 0.00,
                "currentnumber": 0.00,
                "currentprice": 0,
                "exchangeRate": 0.00000,
                "voucherId": 134527
                }, {
                "foresubText": null,
                "date": "2017-08-31",
                "voucherNo": "007",
                "summary": "ddk ",
                "direction": "贷",
                "jfbalance": 10000.00,
                "jfbalanceOrg": 0.00,
                "jfnumber": 0.00,
                "jfprice": 0,
                "dfbalance": 0.00,
                "dfbalanceOrg": 0.00,
                "dfnumber": 0.00,
                "dfprice": 0,
                "currentbalance": 173990.00,
                "currentbalanceOrg": 0.00,
                "currentnumber": 0.00,
                "currentprice": 0,
                "exchangeRate": 0.00000,
                "voucherId": 243777
                }, {
                "foresubText": null,
                "date": "2017-08-31",
                "voucherNo": "007",
                "summary": "ddk ",
                "direction": "贷",
                "jfbalance": 5000.00,
                "jfbalanceOrg": 0.00,
                "jfnumber": 0.00,
                "jfprice": 0,
                "dfbalance": 0.00,
                "dfbalanceOrg": 0.00,
                "dfnumber": 0.00,
                "dfprice": 0,
                "currentbalance": 168990.00,
                "currentbalanceOrg": 0.00,
                "currentnumber": 0.00,
                "currentprice": 0,
                "exchangeRate": 0.00000,
                "voucherId": 243777
                }, {
                "foresubText": null,
                "date": "2017-08-31",
                "voucherNo": "008",
                "summary": "df d",
                "direction": "贷",
                "jfbalance": 10000.00,
                "jfbalanceOrg": 0.00,
                "jfnumber": 0.00,
                "jfprice": 0,
                "dfbalance": 0.00,
                "dfbalanceOrg": 0.00,
                "dfnumber": 0.00,
                "dfprice": 0,
                "currentbalance": 158990.00,
                "currentbalanceOrg": 0.00,
                "currentnumber": 0.00,
                "currentprice": 0,
                "exchangeRate": 0.00000,
                "voucherId": 395020
                }, {
                "foresubText": null,
                "date": "2017-08-31",
                "voucherNo": "008",
                "summary": "df d",
                "direction": "贷",
                "jfbalance": 50000.00,
                "jfbalanceOrg": 0.00,
                "jfnumber": 0.00,
                "jfprice": 0,
                "dfbalance": 0.00,
                "dfbalanceOrg": 0.00,
                "dfnumber": 0.00,
                "dfprice": 0,
                "currentbalance": 108990.00,
                "currentbalanceOrg": 0.00,
                "currentnumber": 0.00,
                "currentprice": 0,
                "exchangeRate": 0.00000,
                "voucherId": 395020
                }, {
                "foresubText": null,
                "date": "2017-08",
                "voucherNo": null,
                "summary": "本月合计",
                "direction": "贷",
                "jfbalance": 75010.00,
                "jfbalanceOrg": 0.00,
                "jfnumber": 0.00,
                "jfprice": 0,
                "dfbalance": 185000.00,
                "dfbalanceOrg": 0.00,
                "dfnumber": 0.00,
                "dfprice": 0,
                "currentbalance": 108990.00,
                "currentbalanceOrg": 0.00,
                "currentnumber": 0.00,
                "currentprice": 0,
                "exchangeRate": null,
                "voucherId": -1
                }, {
                "foresubText": null,
                "date": "2017-08",
                "voucherNo": null,
                "summary": "本年累计",
                "direction": "贷",
                "jfbalance": 78010.00,
                "jfbalanceOrg": 0.00,
                "jfnumber": 0.00,
                "jfprice": 0,
                "dfbalance": 187000.00,
                "dfbalanceOrg": 0.00,
                "dfnumber": 0.00,
                "dfprice": 0,
                "currentbalance": 108990.00,
                "currentbalanceOrg": 0.00,
                "currentnumber": 0.00,
                "currentprice": 0,
                "exchangeRate": null,
                "voucherId": -1
            }]
        }
    },
    created(){
        let platform = weex.config.env.platform;
        this.web = platform.toLowerCase()!=='web'?false:true;
    },
    methods:{
        getUrl(param){
            let bundleUrl = weex.config.bundleUrl; 
            bundleUrl = new String(bundleUrl); 
            let platform = weex.config.env.platform;
            var nativeBase;  
            var native;   

            nativeBase = bundleUrl.substring(0, bundleUrl.lastIndexOf('/') + 1)
            native = nativeBase.replace('components/','') + 'assets/' + param;
            
            return native;  
        },
        back(){
            var navigator = weex.requireModule('navigator')
            navigator.pop()
        },
        openChild(index){
            this.chartList[index].lock = !this.chartList[index].lock;
        }
    }
    
}
</script>

<style scoped>
.wrapper{
    background-color: #f5f5f5;
}
.header{
    height: 90px;
    width: 750px;
    background-color: #ffffff;
}
.header-text{
    height: 90px;
    line-height: 90px;
    text-align: center;
}
.back-area{
    width: 50px;
    height: 50px;
    position: absolute;
    left: 20px;
    top: 20px;
    align-items: center;
    justify-content: center;
}
.back{
    width: 30px;
    height: 30px;
}
.main{
    flex: 1;
}

.title{
  height:70px;
  background-color: #ffffff;
}
.titleText{
    flex: 1;
    height:70px;
    text-align:center;
    font-size:34px;
    line-height:70px;
    font-weight: bold;
}
.button{
  position: absolute;
  right: 20px;
  top: 8px;
  text-align:center;
  width: 100px;
  height: 54px;
  line-height:54px;
  font-size:28px;
  border-radius: 5px;
  background-color: #94cf28;
  color: #ffffff;
}

.group{
  border-top-width: 2px;
  border-top-color: #dddddd; 
  margin-bottom: 20px;
}

.item{
  height: 70px;
  border-bottom-width: 2px;
  border-bottom-color: #dddddd; 
  background-color: #ffffff;
  flex-direction: row;
  align-items: center;
}
.item-title{
  background-color: #defcfe;
  flex-direction: row;
}
.column{
    flex:1;
    flex-direction: row;
    padding-left:20px; 
    padding-right:20px; 
    align-items: center;
}
.left{
    /* width: auto; */
    font-size: 26px;
    color: #5c5c5c;
}
.rightBold{
    flex: 1;
    text-align: right;
    font-size: 26px;
    color: #5c5c5c;
}
.bold{
    font-weight: bold;
}
.red{
    color: #FF0000;
}
</style>
